<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TerminalFX</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #terminal {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="terminal"></div>
<script src="hterm.js"></script>
<script>
    hterm.defaultStorage = new lib.Storage.Memory();
    hterm.copySelectionToClipboard = function (document) {
            window.app.copyText(document.getSelection().toString());
        };
    var t = new hterm.Terminal("myterm");
    t.getPrefs().set("send-encoding", "raw");
    t.getPrefs().set("receive-encoding", "utf-8");
    t.getPrefs().set("font-size", 15);
	t.getPrefs().set("foreground-color", "#00ff00");
	t.getPrefs().set("copy-on-select", true);
	t.getPrefs().set("clear-selection-after-copy", true);

    //    t.getPrefs().set("use-default-window-copy", true);
    //    t.getPrefs().set("clear-selection-after-copy", true);
    //    t.getPrefs().set("copy-on-select", false);
    //    t.getPrefs().set("ctrl-c-copy", true);
    //    t.getPrefs().set("ctrl-v-paste", true);
    //    t.getPrefs().set("cursor-color", "black");
    //    t.getPrefs().set("background-color", "white");
    //    t.getPrefs().set("font-size", 12);
    //    t.getPrefs().set("foreground-color", "black");
    //    t.getPrefs().set("cursor-blink", false);
    //    t.getPrefs().set("scrollbar-visible", true);
    //    t.getPrefs().set("scroll-wheel-move-multiplier", 0.1);
    //    t.getPrefs().set("user-css", "/afx/resource/?p=css/hterm.css");
    //    t.getPrefs().set("enable-clipboard-notice",true);



    t.onTerminalReady = function () {



        var io = t.io.push();

        io.onVTKeystroke = function (str) {
            window.app.receive(str);
        };

        io.sendString = io.onVTKeystroke;



        t.installKeyboard();

    };

    t.decorate(document.querySelector('#terminal'));
</script>
</body>
</html>